﻿<!DOCTYPE html>

<html>
<head>
<title></title>
<script type="text/javascript">
    function draw() {
        var canvas = document.getElementById("Canvas1");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            // 填充三角形
            ctx.beginPath();
            ctx.moveTo(25, 25);
            ctx.lineTo(105, 25);
            ctx.lineTo(25, 105);
            ctx.fill();

            // 勾边三角形
            ctx.beginPath();
            ctx.moveTo(125, 125);
            ctx.lineTo(125, 45);
            ctx.lineTo(45, 125);
            ctx.closePath();
            ctx.stroke(); 
        }
    }
    window.onload = draw;
</script>
</head>
<body>
    <canvas id="Canvas1" width="150" height="150"></canvas>
</body>
</html>
